<template>
    <header class="initiator">
        <div class="logo-content">
            <div class="logo-container">
                <img
                    src="https://typora-image-mrz.oss-cn-beijing.aliyuncs.com/OIP.jpg"
                    class="logo-img"
                    alt="logo"
                />
                <span class="logo-text highlight">田园帮帮</span>
                <span class="logo-text">让乡村生活更有保障</span>
            </div>
        </div>
    </header>
    <div class="navigation-bar">
        <el-menu class="menu-content" mode="horizontal" :default-active="route.path" router v-cloak>
            <!-- 左侧一级菜单 -->

          <template v-for="item in filteredNavList" :key="item.name">
            <el-menu-item :index="item.to" v-if="!item.adminOnly || userStore.checkIsAdmin()">
              {{ item.name }}
            </el-menu-item>
          </template>
            <el-menu-item disabled class="menu-spacer" />
            <el-submenu v-for="item in navListWithChildren" :key="item.name" :index="item.name">
                <template #title>
                    <span>个人中心</span>
                </template>
                <template v-for="child in item.children" :key="child.name">
                    <el-menu-item :index="child.to" @click="handleClick(child.to)">
                        {{ child.name }}
                    </el-menu-item>
                </template>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const navList = [
  { name: '首页', to: '/home/info' },
  { name: '农资商城', to: '/home/shop' },
  { name: '融资服务', to: '/home/loans' },
  { name: '贷款管理', to: '/home/loansControl', adminOnly: true },
  {
    name: '个人中心',
    to: null,
    children: [
      { name: '我的空间', to: '/home/space' },
      { name: '退出登录', to: '' }
    ]
  }
]
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()



const navListWithChildren = computed(() => navList.filter(item => item.children))
const filteredNavList = computed(() => navList.filter(item => !item.children))

// 点击处理函数

// 处理登出
const handleLogout = () => {
    userStore.clearUserInfo()
    router.push('/login')
}
const handleClick = to => {
  if (to === '') {
    handleLogout()
  } else {
    router.push(to).catch(() => {})
  }
}
onMounted(async () => {
    await userStore.fetchUserInfo()
})
</script>

<style lang="less" scoped>
.initiator {
    width: 100%;
    background-color: #fff9e6;
    height: 100px;
    display: flex;
    justify-content: center;

    .logo-content {
        width: 1200px;
        display: flex;
        align-items: center;
        height: 90px;

        .logo-container {
            display: flex;
            flex: 1;
            align-items: center;

            .logo-text {
                margin-left: 10px;
                font-size: 36px;
                color: #8b6b2e;
            }

            .logo-img {
                height: 70px;
                border-radius: 50%;
                margin: 0 20px;
            }

            .highlight {
                color: #d4b106;
                margin-left: 10px;
                margin-right: auto;
            }
        }
    }
}

.navigation-bar {
    width: 100%;
    background-color: #d4b106;
    display: flex;
    justify-content: center;

    .menu-content {
        width: 1200px;
        display: flex;
        align-items: center;
        background-color: transparent;
        height: 60px;
    }

    .menu-spacer {
        flex: 1;
        pointer-events: none;
        cursor: default;
        background-color: transparent;
    }

    ::v-deep(.el-menu-item),
    ::v-deep(.el-sub-menu__title) {
        height: 60px !important;
        line-height: 60px !important;
        padding: 0 20px !important;
        color: white;
        font-size: 16px;
        font-weight: 500;

        &:hover {
            color: #8b6b2e;
            background-color: #fff9e6;
        }
    }

    ::v-deep(.is-active) {
        color: #8b6b2e;
        background-color: #fff9e6;
        border-bottom: 2px solid #8b6b2e;
    }
}
</style>
